<template>
    <div class="portList">
        <Row :gutter="10" type="flex" class="timeList">
            <Col>
            <RadioGroup v-model="switchTime" type="button" @on-change="switchList">
                <!-- <Radio label="0">今天</Radio> -->
                <Radio label="1">昨天</Radio>
                <Radio label="2">7天</Radio>
                <Radio label="3">月</Radio>
            </RadioGroup>
            </Col>
            <Col>
            <DatePicker :options="options" v-width="'100%'" @on-change="timeChange" type="daterange"
                v-model="ruleFrom.time" placeholder="日期选择" />
            </Col>
            <Col>
            <Select v-model="ruleFrom.profession_id" placeholder="请选择" @on-change="personalStatus">
                <Option v-for="item in profession_list" :value="item.id" :key="item.id">{{item.profession_name}}
                </Option>
            </Select>
            </Col>
        </Row>
        <Card dis-hover>
            <Table size="small" @on-cell-click="cellClick" ref="table" border :columns="columns" :data="tdata"
                :loading="loading" :show-summary="true" :summary-method="handleSummary">
            </Table>
        </Card>
        <list-detail ref="drawerList"></list-detail>
    </div>
</template>

<script>
    import { getBeforeDate } from '@/utils/datetime'
    import { getReportList, getReportListinfo } from '@/api/report'
    import dayjs from 'dayjs'
    import $ from 'jquery'
    import ListDetail from './module/table-list'
    export default {
        name: 'returnVisit',
        components: {
            ListDetail
        },
        data () {
            return {
                ruleFrom: {
                    member_id: '',
                    time: [],
                    profession_id: '1'
                },
                // grid: {
                //     xl: 4,
                //     lg: 8,
                //     md: 12,
                //     sm: 24,
                //     xs: 24
                // },
                tdata: [],
                loading: false,
                oldColumns: [
                    {
                        title: '诊室',
                        key: 'clinic_name',
                        minWidth: 90,
                        align: 'center',
                        className: 'nodePoint'
                    }
                ],
                profession_list: [],
                columns: [
                    {
                        title: '项目',
                        key: 'pname',
                        minWidth: 118,
                        fixed: 'left',
                        align: 'center'
                    },
                    {
                        title: '总次数',
                        key: 'callback_num',
                        minWidth: 90,
                        fixed: 'left',
                        align: 'center'
                    },
                    {
                        title: '总人数',
                        key: 'callback_patient_num',
                        minWidth: 90,
                        fixed: 'left',
                        align: 'center'
                    },
                    {
                        title: '正常回访比例',
                        key: 'normal_callback_rate',
                        minWidth: 110,
                        align: 'center',
                        className: 'nodePoint',
                        render: (h, params) => {
                            let row = params.row;
                            return h('span', {}, row.normal_callback_rate + '%')
                        }
                    },
                    // {
                    //     title: '诊室',
                    //     key: 'clinic_name',
                    //     minWidth: 90,
                    //     align: 'center',
                    //     className: 'nodePoint'
                    // },

                    {
                        title: '回访方式',
                        minWidth: 90,
                        align: 'center',
                        children: []
                    },
                    {
                        title: '回访状态',
                        minWidth: 90,
                        align: 'center',
                        children: []
                    },
                    {
                        title: '数据年份',
                        minWidth: 90,
                        align: 'center',
                        children: []
                    }
                ],
                total: [],
                switchTime: '1',
                nowDayTime: '',
                nowMonthOn: '',
                servenTime: '',
                yesterdayT: '',
                options: {
                    disabledDate (pick) {
                        const curDate = new Date() - 1000 * 24 * 60 * 60
                        let reVal = 0;
                        if (pick > curDate) {
                            reVal = 1
                        }
                        return reVal
                    }
                },
                status: true
            }
        },
        created () {
            this.getNowDay()
        },
        async mounted () {
            await this.getOneType()
            await this.getLoad()
        },
        methods: {
            getOneType () {
                return getReportListinfo().then(res => {
                    if (res.profession_type === 0) {
                        this.ruleFrom.profession_id = 1
                    } else if (res.profession_type === 1) {
                        this.ruleFrom.profession_id = 1
                    } else {
                        this.ruleFrom.profession_id = 2
                    }
                    this.profession_list = res.profession_list
                })
            },
            resetData () {
                if (this.status) {
                    // if (this.ruleFrom.profession_id === 1) {
                    //     this.columns.splice(4, 1)
                    // }
                    this.status = false
                }
                // this.columns[this.getNumber(5)].children = []
                // this.columns[this.getNumber(6)].children = []
                // this.columns[this.getNumber(7)].children = []
                this.columns[4].children = []
                this.columns[5].children = []
                this.columns[6].children = []
                this.total = {}
                this.tdata = []
            },
            handleSummary ({ columns, data }) {
                const sums = {}
                columns.forEach((column, index) => {
                    const key = column.key || column.slot
                    if (index === 0) {
                        sums[key] = {
                            key,
                            value: '合计'
                        }
                        return
                    }
                    sums[key] = {
                        key,
                        value: this.total[key]
                    }
                })
                return sums
            },
            getConfig () {
                return {
                    member_id: this.ruleFrom.member_id,
                    start_time: this.ruleFrom.time[0] !== '' ? dayjs(this.ruleFrom.time[0]).format('YYYY-MM-DD') : '',
                    end_time: this.ruleFrom.time[1] !== '' ? dayjs(this.ruleFrom.time[1]).format('YYYY-MM-DD') : '',
                    profession_id: this.ruleFrom.profession_id
                }
            },
            getLoad () {
                const config = this.getConfig()
                this.loading = true
                $('.tbActive').removeClass('tbActive')
                getReportList(config).then(res => {
                    this.resetData()
                    // if (res.list.length === 0) {
                    //     return false
                    // }
                    const way = this.reduceList(res.total.callback_way, 'way')
                    const state = this.reduceList(res.total.callback_state, 'state')
                    const year = this.reduceList(res.total.callback_year, 'year')
                    this.total = { ...res.total, ...way, ...state, ...year }
                    this.setColums(res)
                }).finally(() => {
                    this.$nextTick(() => { this.loading = false })
                })
            },
            setColums (item) {
                // if (item.list.length === 0) return false
                let way = this.renderHeader(item.condition.callback_way_list, 'way')
                let status = this.renderHeader(item.condition.callback_status_list, 'state')
                let year = this.renderHeader(item.condition.year_list, 'year')
                let data = []
                if (item.list.length !== 0) {
                    for (let i = 0; i < item.list.length; i++) {
                        const way = item.list[i].callback_way
                        const state = item.list[i].callback_state
                        const year = item.list[i].callback_year
                        data.push({
                            ...item.list[i],
                            ...this.reduceList(way, 'way'),
                            ...this.reduceList(state, 'state'),
                            ...this.reduceList(year, 'year')
                        })
                    }
                }
                this.$nextTick(() => {
                    // this.columns[this.getNumber(5)].children = way
                    // this.columns[this.getNumber(6)].children = status
                    // this.columns[this.getNumber(7)].children = year
                    this.columns[4].children = way
                    this.columns[5].children = status
                    this.columns[6].children = year
                    this.tdata = data
                })
            },
            // getNumber (n) {
            //     return n - (this.ruleFrom.profession_id === 1 ? 1 : 0)
            // },
            renderHeader (list = [], key) {
                let item = []
                for (let i = 0; i < list.length; i++) {
                    item.push({
                        title: key === 'year' ? list[i] : list[i].name,
                        key: key === 'year' ? list[i] + key : list[i].id + key,
                        minWidth: 90
                    })
                }
                return item
            },
            reduceList (data = {}, key) {
                let obj = {}
                for (let i in data) {
                    obj[i + key] = data[i]
                }
                return obj
            },
            switchList (e) {
                switch (e) {
                case '0':
                    this.ruleFrom.time = [this.nowDayTime, this.nowDayTime]
                    break
                case '1':
                    this.ruleFrom.time = [this.yesterdayT, this.yesterdayT]
                    break
                case '2':
                    this.ruleFrom.time = [this.servenTime, this.yesterdayT]
                    break
                case '3':
                    this.ruleFrom.time = [this.nowMonthOn, this.yesterdayT]
                    break
                default:
                    this.ruleFrom.time = [this.yesterdayT, this.yesterdayT]
                    this.switchTime = '1'
                    break
                }
                this.getLoad()
            },
            timeChange (e) {
                if (!e) {
                    this.resetData()
                    return false
                }
                const startTime = e[0] || ''
                const endTime = e[1] || ''
                const nowDay = dayjs(this.nowDayTime).format('YYYY-MM-DD') // 当天
                const nowMonthStart = dayjs(this.nowMonthOn).format('YYYY-MM-DD') // 当月第一天
                const nowMonthEnd = dayjs(this.servenTime).format('YYYY-MM-DD') // 7天前
                const nowYearStart = dayjs(this.yesterdayT).format('YYYY-MM-DD') // 昨天
                if (startTime === nowDay && endTime === nowDay) {
                    this.switchTime = '0'
                } else if (startTime === nowYearStart && endTime === nowYearStart) {
                    this.switchTime = '1'
                } else if (startTime === nowMonthEnd && endTime === nowYearStart) {
                    this.switchTime = '2'
                } else if (startTime === nowMonthStart && endTime === nowYearStart) {
                    this.switchTime = '3'
                } else {
                    this.switchTime = ''
                }
                this.getLoad()
            },
            personalStatus (e) {
                // if (this.ruleFrom.profession_id === 2) {
                // this.columns.splice(4, 0, this.oldColumns[0])
                // } else {
                // this.columns.splice(4, 1)
                // }
                this.$nextTick(() => {
                    this.getLoad()
                })
            },
            // 昨天 7天 月
            getNowDay () {
                const now = new Date()
                const nowMonth = now.getMonth()
                const nowYear = now.getFullYear()
                const time = (new Date()).getTime() - (24 * 60 * 60 * 1000)
                this.yesterdayT = new Date(time)
                this.nowDayTime = now
                this.nowMonthOn = new Date(nowYear, nowMonth, 1)
                this.servenTime = getBeforeDate(7)
                this.ruleFrom.time = [this.yesterdayT, this.yesterdayT]
            },
            // 点击弹出侧边栏
            handleOpenDrawer (row) {
                const { project_id } = row
                this.$refs.drawerList.handleDrawer(project_id, this.ruleFrom)
            },
            // 全局点击事件
            cellClick (row, column, data, e) {
                if (column.key === 'clinic_name' || column.key === 'normal_callback_rate') return false
                const that = e.target
                const params = {
                    project_id: row.project_id,
                    callback_way_id: '', // 回访状态
                    callback_state_id: '', // 回访状态
                    reg_time: '' // 回访年份
                }
                this.ruleFrom.project_id = row.project_id
                if (column.key.indexOf('way') !== -1) {
                    params.callback_way_id = column.key.split('way')[0]
                } else if (column.key.indexOf('state') !== -1) {
                    params.callback_state_id = column.key.split('state')[0]
                } else if (column.key.indexOf('year') !== -1) {
                    params.reg_time = column.key.split('year')[0]
                }

                $('.tbActive').removeClass('tbActive')
                $(that).parent().addClass('tbActive')
                this.$refs.drawerList.handleDrawer(params, this.ruleFrom)
            }
            // nums(row) {
            //     return parseInt((row.callback_patient_num / this.total.callback_patient_num) * 10000)/100
            // }
        }
    }
</script>

<style leng="less" scoped>
    .timeList {
        padding-top: 16px;
        margin-bottom: 16px;
    }

    /deep/.ivu-table-header thead tr th .ivu-table-cell,
    /deep/.ivu-table-fixed-header thead tr th .ivu-table-cell {
        height: auto;
        line-height: normal;
    }

    /deep/.ivu-table-cell {
        height: 40px;
        line-height: 40px;
        cursor: pointer;
    }

    /deep/.ivu-table-summary .ivu-table-cell {
        cursor: text;
    }

    /deep/.ivu-table thead tr th .ivu-table-cell {
        cursor: text;
    }
</style>
